<template>
  <div id="orderBox">
    <span class="title">我的订单>订单详情</span>
    <div class="tips">
      <span>如有疑问，请拨打客服热线:157-3050-7002</span>
    </div>
    <div
      class="goods"
      v-for="(item, index) in $store.state.userCar"
      :key="index"
    >
      <img :src="$store.state.url + item.goods_coverimg" alt="" />
      <span>{{ item.goods_name }}</span>
      <span>数量:{{ item.goods_count }}</span>
      <span>￥{{ item.goods_price }}</span>
    </div>
    <div id="payable">
      <span>金额明细</span>
      <div>
        <span>商品金额:{{ payMoney }}</span>
        <span>实付金额:{{ realPay }}</span>
        <span>(商品金额—余额)</span>
      </div>
    </div>
    <div id="stateBox">
      <span>订单状态</span>
      <span class="state">{{ state }}</span>
    </div>
    <div id="operation">
      <div>
        <span>订单详情</span>
      </div>
      <div>
        <button @click="cancel1" v-show="cancel">取消订单</button>
        <button class="pay" @click="pay" v-show="flag">{{goPay}}</button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      state: "待付款",
      payMoney:"",
      money:"",
      flag:true,
      cancel:true,
      goPay:"去付款"
    };
  },
  methods: {
    pay() {
      let date = new Date()
      let payTime = `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()}`
      this.cancel = false
      this.state = "已付款"
      let goodsId = []
      this.goPay = "已完成"
      this.$store.state.userCar.map((el)=>{
        goodsId.push(el.goods_id)
      })
      // console.log(goodsId)
      this.axios("/lqc/completePay",{params:{goodsIdArr:JSON.stringify(goodsId),payTime:payTime}})
      let balance
      if(this.payMoney-this.money<=0){
        balance = this.money - this.payMoney
      }else{
        balance = 0
      }
      this.axios("/lqc/modBalance",{params:{
        balance:balance
      }})
    },
    cancel1(){
      console.log(goodsId)
      this.flag = false
      let goodsId = []
      this.$store.state.userCar.map((el)=>{
        goodsId.push(el.goods_id)
      })
      
      this.state = "已取消"
      this.axios("/lqc/canclePay",{params:{goodsIdArr:JSON.stringify(goodsId)}})
      
    }
  },
  async mounted() {
    // console.log(this.$store.state.userCar);
    this.payMoney = this.$store.state.userCar.reduce((total,el)=>{
      return total+el.goods_count*el.goods_price
    },0)
    let req = await this.axios("/lqc/getAccount")
      this.money = req.data[0].account_money 
  },
  computed:{
    realPay(){
      if(this.payMoney-this.money<=0){
        return 0
      }else{
        return this.payMoney-this.money
      }
    }
  }
};
</script>
<style lang="scss" scoped>
#orderBox {
  padding-top: 160px;
  margin: 0 50px;
  overflow: hidden;
}
.title {
  font-size: 26px;
}
.tips {
  display: flex;
  justify-content: end;
  margin-bottom: 20px;
  margin-top: 10px;
  span {
    color: rgb(93, 93, 93);
    font-size: 14px;
  }
}
#operation {
  border-top: 1px solid rgb(197, 195, 195);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  padding-bottom: 30px;
  button {
    width: 150px;
    height: 40px;
    border-radius: 15px;
    border: 2px solid rgb(219, 219, 219);
    background-color: #fff;
    cursor: pointer;
  }
  span {
    font-size: 16px;
    font-weight: 600;
  }
  .pay {
    background-color: rgb(255, 227, 42);
    margin-left: 20px;
  }
}
#stateBox {
  border-top: 1px solid rgb(197, 195, 195);
  height: 60px;
  line-height: 60px;
  display: flex;
  justify-content: space-between;
  span {
    font-size: 16px;
    font-weight: 600;
    margin-right: 30px;
  }
  .state {
    font-size: 25px;
  }
}
.goods {
  padding: 20px 0;
  border-top: 1px solid rgb(197, 195, 195);
  display: flex;
  span {
    flex: 1;
    text-align: center;
    line-height: 170px;
    font-size: 20px;
  }
  img {
    width: 170px;
  }
}
#payable {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  padding-bottom: 20px;
  div {
    margin-right: 20px;
    span {
      display: block;
      font-weight: 500;
    }
  }
}
</style>